<template>
  <div class="container">
    <div class="nav">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <template v-for="item in menus">
          <el-menu-item v-if="!item.children" :index="item.path">{{item.name}}</el-menu-item>
          <el-sub-menu v-else :index="item.path">
            <template #title>
              <el-icon><location /></el-icon>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item v-for="item2 in item.children" :index="item2.path">{{item2.name}}</el-menu-item>
            
        </el-sub-menu>
        </template>
        
        
        
      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
      <button @click="getMenus">获取菜单</button>
    </div>
  </div>
  
</template>

<script lang='ts' setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {getMenusApi} from "@/apis/userApi"

const menus = ref([])

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const getMenus =async ()=>{
  const res = await getMenusApi("mrbird")
  console.log(res.data);
  menus.value = res.data[0].children
  
}
</script>

<style lang='scss' scoped>
.container{
  width:100%;
  height:100vh;
  display:flex;
  .nav{
    width:200px;
    background-color:pink;
  }
}
</style>